<template>
  <div class="historical-assessment-indicators">
    <div class="list-wrap">
      <seamlessScroll :data="list" :class-option="defaultOption">
        <div class="list">
          <div
            class="item"
            v-for="(l, i) in list"
            :key="`historical-assessment-indicators-item${i}`"
          >
            <span class="name">
              {{ l.name }}
            </span>
            <div class="line"></div>
            <div class="data">
              <span class="key">理论值</span>
              <p class="val-wrap">
                <span class="val">{{ l.doctrinal }}</span>
                <span class="unit">{{ l.unit }}</span>
              </p>
            </div>
            <div class="data">
              <span class="key">临界值</span>
              <p class="val-wrap">
                <span class="val">{{ l.boundary }}</span>
                <span class="unit">{{ l.unit }}</span>
              </p>
            </div>
          </div>
        </div>
      </seamlessScroll>
    </div>
  </div>
</template>
<script>
import seamlessScroll from "@/views/waterLevel/components/nextWeek/seamlessScroll.vue";
export default {
  components: {
    seamlessScroll,
  },
  data() {
    return {
      list: [
        { name: "3d", doctrinal: "4672", boundary: "4251", unit: "m/s" },
        { name: "1d", doctrinal: "4672", boundary: "4251", unit: "m/s" },
        { name: "2d", doctrinal: "4672", boundary: "4251", unit: "m/s" },
        { name: "4d", doctrinal: "4672", boundary: "4251", unit: "m/s" },
        { name: "6d", doctrinal: "4672", boundary: "4251", unit: "m/s" },
        { name: "17d", doctrinal: "4672", boundary: "4251", unit: "m/s" },
      ],
      defaultOption: {
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
      },
    };
  },
  mounted() {},
  computed: {},
  methods: {},
};
</script>
<style scoped lang='scss'>
.historical-assessment-indicators {
  padding-top: vh(20px);
  box-sizing: border-box;
  width: vw(288px);
  .list-wrap {
    height: vh(160px);
    overflow: hidden;
    .list {
      .item {
        height: vh(36px);
        background: rgba(15, 101, 133, .6);
        border: 1px solid rgba(73, 239, 255, 0.2);
        display: flex;
        align-items: center;
        &:nth-child(2n) {
          background: none;
          border: none;
        }
        .name {
          width: vw(36px);
          font-family: Source Han Sans CN;
          font-size: vh(14px);
          color: #ffffff;
          text-align: center;
        }
        .line {
          height: vh(22px);
          border-left: 1px solid #42a7b6;
        }
        .data {
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: vw(130px);
          border-left: none;

          p {
            margin: 0;
          }
          .key {
            font-family: Source Han Sans CN;
            font-size: vh(14px);
            color: #b3b3b3;
            white-space: nowrap;
          }
          .val-wrap {
            font-family: D-DIN-PRO;
            font-weight: bold;
            font-size: vh(18px);
            color: #dafdff;
            .val {
              font-family: D-DIN-PRO;
              font-weight: bold;
              font-size: vh(18px);
              color: #dafdff;
            }
            .unit {
              margin-left: vw(2px);
            }
          }
        }
      }
    }
  }
}
</style>
